<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="这是一个关于HTML meta标签用法的示例页面。">
    <title>Document</title>
    <style>
        /* CSS样式表 */
        #result
        {
            width:200px;
            height:100px;
            border:solid 1px purple;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素, 是一个对象
        const btn = document.getElementsByTagName("button")[0];
        //btn.id = "aa";
        //console.log(btn, typeof btn);
        // console.log(btn.onclick, typeof btn.onclick);
        // 配置onclick事件的触发函数, 赋值式函数, 空方法, 相当于函数指针, 都是指针, 
        btn.onclick = function(){
            // 创建对象
            const xhr = new XMLHttpRequest();
            //console.log(xhr);
            // 配置http的请求报文
            xhr.open('GET', 'http://127.0.0.1:8080/server'); // 配置请求行

            // 发送请求
            xhr.send();

            // 处理响应
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200)
                {
                    // 请求已完成，且响应状态为200(OK)
                    //let response = JSON.parse(xhr.responseText);
                    console.log(xhr.responseText);
                }
                else if (xhr.readyState === 4)
                {
                    // 请求已完成, 但响应状态不为200
                    console.error("请求失败, 状态码: ", xhr.status);
                }
            }


        }

        // 设置div的互动事件
        const  div = document.getElementById("result");
        div.onmouseover = function()
        {
            // 创建对象, 利用该对象来管理发送请求的过程
            const xhr = new XMLHttpRequest();

            xhr.open("POST", "http://127.0.0.1:8080/server"); // 配置请求行
            xhr.send(); // 配置请求体, 并发送请求
            
            // 处理响应
            xhr.onreadystatechange = function()
            {
                if (xhr.readyState === 4 && xhr.status === 200)
                {
                    div.innerText = xhr.responseText;
                }
            }

        }
    </script>
</body>
</html>